<template>
  <div>
    <h2>物流相关信息</h2>
      <div class="logistics-info-header">
        <div class="logistics-info-header-left">
          <div class="logistics-status blue" :style="{ color: getcolour(data.logisticsStatus) }" >{{ getStatus(data.logisticsStatus)  }}</div>
          <div class="logistics-company">{{ data.logisticsCompany }}</div>
          <div class="logistics-no">{{ data.logisticsNo }}</div>
        </div>
      </div>
      <ul class="logistics-info-list" v-for="item in data.logisticsInfo" :key="item.time">
        <li >
          <div class="logistics-info-list-time">{{ item.time }}</div>
          <div class="logistics-info-list-content">{{ item.content }}</div>
        </li>
      </ul>
      <button>查看物流详情</button>
  </div>
</template>
<script>
export default{
  props:['data'],
  methods:{

  getcolour(logisticsStatus){
switch (logisticsStatus) {
  case 0: return 'red';
  case 1: return 'yellow';
  case 2: return 'green';
  default: return 'black';
}
  },
  getStatus(logisticsStatus){
    switch(logisticsStatus){
                case 0 : return '未发货' ;
                case 1 : return '已发货' ;
                case 2 : return '已签收' ;
                case 3 : return '未签收' ;
            }
  }

  }
}
</script>